<template>
	<view>
		<!-- 轮播图部分内容 -->
		<view class="banner_warp">
			<view class="page_title_warp">
				首页
			</view>
			<view class="page_banner_warp">
				<u-swiper :list="swipperList" keyName="image" circular height="150px"></u-swiper>
			</view>
		</view>
		<view class="container_warp">
			<!-- 中间菜单部分内容 -->
			<view class="menus_warp">
				<view class="home_navgate_item" v-for="item in homeList" :key='item.groupName'>
					<view class="navgate_group_title">{{item.groupName}}</view>
					<view class="navgate_menus_list">
						<block v-for="menu in item.list" :key='menu.path'>
							<view class="menu_item" @click="menuItemClickHandle(menu)">
								<view class="menu_icon_warp" :style="menu.color">
									<u-icon :name="menu.icon" size="36" color="#ffffff"></u-icon>
								</view>
								<view class="menu_title_warp">{{menu.title}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<!-- 其他服务内容 -->
			<view class="service_warp"></view>




		</view>

	</view>
</template>

<script>
	import homeList from './home.config.js';
	export default {
		data() {
			return {
				homeList: homeList,
				swipperList: [{
						image: "../../../../static/banner/banner1.png",
					},
					{
						image: "../../../../static/banner/banner2.png",
					},
					{
						image: "../../../../static/banner/banner3.png",
					}
				],


			}
		},
		methods: {
			initData() {
				this.$u.api.testInfo().then(res => {
					console.log(res);
				})
			},
			menuItemClickHandle(item) {
				// console.log(item);
				if (item.path) {
					uni.navigateTo({
						url: item.path
					})

				} else {
					uni.showToast({
						icon: 'none',
						title: '功能正在建设中',
						duration: 3000
					})
				}
			}

		},
		onLoad() {
			this.$u.vuex('token', '123456rdffghfs')
			this.initData();
		}
	}
</script>

<style>
	.banner_warp {}

	.page_title_warp {
		height: 220rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #3dcd83;
		font-size: 36rpx;
		color: #FFFFFF;
		border-bottom-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
		padding-top: 60rpx;
	}

	.page_banner_warp {
		width: 90%;
		margin: 0 5%;
		position: relative;
		top: -120rpx;
	}

	.container_warp {
		width: 100%;
		height: 100%;
		position: relative;
		top: -110rpx;
	}

	/* 菜单部分 */
	.menus_warp {
		width: 96%;
		margin: 0 2%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.home_navgate_item {
		width: 100%;
	}

	.navgate_group_title {
		font-size: 34rpx;
		font-weight: 600;
		margin: 25rpx 0;
	}

	.navgate_menus_list {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.menu_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		width: 22%;
		padding: 20rpx 0;
	}

	.menu_icon_warp {
		padding: 20rpx 20rpx;
		border-radius: 80rpx;
		margin-bottom: 20rpx;
	}

	.menu_title_warp {
		font-size: 27rpx;
		font-weight: 600;
	}
</style>
